Sigma Web Development

CodeWithPrashant – Lecture 19 Notes & Resources

📒 Notes for Lecture 19 (Part 1): CSS Color Properties

  • Color Representations:
    • Hexadecimal (e.g., #FF0000 for red)
    • RGB (e.g., rgb(255, 0, 0))
    • RGBA (e.g., rgba(255, 0, 0, 0.5) – alpha is opacity)
    • HSL (e.g., hsl(0, 100%, 50%) for pure red)
    • HSLA (e.g., hsla(0, 100%, 50%, 0.5))
    • CMYK (e.g., cmyk(0, 100%, 100%, 0) – though less common in CSS)
    • Named colors (e.g., red, blue, green, white, black, yellow, purple)
  • Popular Named Colors:
    • Red: #FF0000
    • Green: #00FF00
    • Blue: #0000FF
    • Black: #000000
    • White: #FFFFFF
    • Yellow: #FFFF00
    • Purple: #800080
  • Additional Examples:
    • Orange: #FFA500
    • Gray: #808080
    • Maroon: #800000
    • Teal: #008080
    • Indigo: #4B0082
    • Aqua: #00FFFF
    • Pink: #FFC0CB
  • HTML Structure Highlights (colors.html):
    • Multiple <h2> links to external “Learn More” resources
    • Each color‐type list resides inside a <div class="same"> block
    • Ordered lists (<ol>) enumerate each representation and each named color
    • The main container <div id="colors"> wraps everything with a border
  • CSS Highlights (style.css in colors folder):
    • Reset (* { margin:0; padding:0; })
    • #colors gets a border: 4px solid blueviolet; and full‐height
    • Headings inside #colors are centered with backgrounds
    • Each <div> under #colors is 50vh tall, light‐blue background, and black border
    • Generic div selector applies green background, black border, padding, margin
    • h3 blocks have darkslategray background, white text
    • Each list item ID (#one, #two, … #twentyone) sets its text color and font-weight: bold;

Hinglish: Lecture 19 Part 1 mein humne CSS mein color kaise represent karte hain, ye dekha: Hex (jaise #FF0000), RGB (rgb(255,0,0)), RGBA (alpha ke saath), HSL, HSLA, CMYK (CSS3 mein itna common nahi), aur named colors (jaise red, blue, green). Phir “Popular color names” aur kuch aur examples (jaise orange, gray, maroon) list kiye. HTML file mein har list ek div.same ke andar hai, aur CSS file mein har div aur h3, ol, div#colors ke liye styling di gayi. Har li ke ID ke through alag‐alag text color aur bold weight set hua hai. Yeh sab color fundamentals samajhne mein madad karta hai.

💻 Live Code Preview – CSS Colors Demo

If the iframe doesn’t load, click
here to open Colors Demo in a new tab.

📒 Notes for Lecture 19 (Part 2): CSS Fonts & Text Properties

  • Google Fonts Import:
    • Inlined @import url(...) for “Poppins”, “Playwrite VN”, and “Macondo” families
  • Table of Font Examples:
    • <table> with <caption>, <thead> and <tbody>
    • Demonstrates different font-family, font-style (normal/italic), and multiple font-weight values (100–900) for “Poppins”
    • Also shows “Playwrite VN” at various weights and “Macondo” normal
    • Each <td id="one">… is styled via CSS to reflect the correct font weight+style
  • Font‐Size Examples:
    • Five <p id="a">… tags under #fontprop demonstrate sizes 18px, 20px, 22px, 24px, 26px, each with a different text color
  • Line‐Height Examples:
    • Under #lineheight, five <p> tags show line-height values 1.5–2.3 at various font sizes
  • Letter‐Spacing:
    • Under #letterspacing, five <p> tags illustrating letter-spacing 1–5px
  • Text Decoration:
    • Under #textdecoration: underline, overline, line-through in various combinations and different font sizes
    • Under #textcol: changing decoration line‐color (red, blue, green, etc.)
    • Under #textdeco: different text-decoration‐style values (solid, none, double, dotted, dashed, wavy, inherit, initial)
    • Under #textlinethick: various text-decoration-thickness values
  • Text Transform & Alignment:
    • Under #texttransform: uppercase, lowercase, capitalize, none, full-width, full-size-kana
    • Under #textalign: left, right, center, justify, start
  • Text Indent & Shadow:
    • #textindent shows indent values 50–250px
    • #textshadow shows increasing shadow offsets (1px–5px blur)
  • Text Overflow & Word‐Break:
    • Under #textoverflow, demonstrates text-overflow: ellipsis/clip/initial/break-word/unset
    • Under #break, shows word-break: normal/break-word/keep-all/break-all/inherit/initial/unset
  • Line Break & Emphasis:
    • Under #textlinebreak: line-break: normal/strict/anywhere/loose/unset
    • Under #textemphasis: text-emphasis: underline/overline/line-through/none/filled
  • Text Justify, Orientation & Direction:
    • #textjustify shows text-justify: left/right/center/justify/distribute
    • #textorientation shows writing-mode: horizontal-tb/vertical-rl/vertical-lr/sideways-rl/sideways-lr
    • #textdirection shows direction: ltr/rtl/lro/rlo/ttb

Hinglish: Lecture 19 Part 2 mein humne fonts aur text properties fundamentals dekhe. Pehle “Poppins”, “Playwrite VN” aur “Macondo” Google Fonts ko import kiya. Table mein har ek font-weight (100–900) aur font-style (normal/italic) show kiya for “Poppins”; saath hi “Playwrite VN” aur “Macondo” families bhi dekhaye. Phir #fontprop ke andar alag‐alag font-size values (18px–26px) aur colors bataye. Uske baad line‐height, letter‐spacing, text‐decoration (underline/overline/line‐through combinations) aur decoration‐color, decoration‐style, decoration‐thickness ka demo diya. Finally, text‐transform (uppercase, lowercase, etc.), text‐align (left, right, center, justify), text‐indent, text‐shadow, text‐overflow, word‐break, line‐break, text‐emphasis, text‐justify, writing‐mode, aur direction properties explain kiye. Har section ek div ke andar hai jisko CSS file mein border aur styling di gayi.

💻 Live Code Preview – CSS Fonts & Text Demo

If the iframe doesn’t load, click
here to open Fonts & Text Demo in a new tab.

← Back to Lecture Dashboard